<template>
  <div class="second mt-2">
    <div class="warning-title">预警情况</div>
    <div class="box">
      <div class="flex align-center mt-1">
        <i class="mr-1"></i>
        <p class="colorfff">整体情况</p>
      </div>
      <div class="flex align-center mt-2">
        <img src="../../../assets/img/warning/icon01.png" alt="" />
        <div class="overflow-hidden ml-1">
          <div class="flex align-center justify-between colorccc font15 mb-3">
            <p>超限预警</p>
            <p>1000</p>
          </div>
          <div class="flex align-center justify-between colorccc font15 mb-3">
            <p>未登记车辆入场</p>
            <p>900</p>
          </div>
          <div class="flex align-center justify-between colorccc font15 mb-3">
            <p>未申报车辆</p>
            <p>600</p>
          </div>
          <div class="flex align-center justify-between colorccc font15 mb-3">
            <p>稽查预警</p>
            <p>90</p>
          </div>
          <div class="flex align-center justify-between colorccc font15">
            <p>纳税预警</p>
            <p>40</p>
          </div>
        </div>
      </div>
      <div class="flex align-center mt-2">
        <i class="mr-1"></i>
        <p class="colorfff">处理情况</p>
      </div>
      <div class="flex align-center mt-2">
        <div class="flex align-center justify-center probox">
          <Progress strokeColor="#337AFC" 
              :strokeWidth="getRealPX(6)" value="16.88"  :radius="getRealPX(38)">
            <template v-slot:footer>
              <b>新增  <span style="color:#337AFC;">146</span></b>
            </template>
          </Progress>
        </div>
        <div class="flex align-center justify-center probox">
          <Progress strokeColor="#00C9FC" 
              :strokeWidth="getRealPX(6)" value="16.88"  :radius="getRealPX(38)">
            <template v-slot:footer>
              <b>处理  <span style="color:#00C9FC;">46</span></b>
            </template>
          </Progress>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Progress from "easy-circular-progress";

export default {
  name: "waringSecond",
  components: { Progress },
  data() {
    return {};
  },
};
</script>
<style lang="stylus" scoped>
.second {
  width: 617px;
  height: 560px;
  background: url('../../../assets/img/warning/bg02.png') no-repeat;
  background-size: 617px 560px;

  .box {
    padding-left: 60px;

    .probox {
      width: 249px;
      color #ffffff
    }

    img {
      width: 230px;
      height: 235px;
      margin-left: 20px;
    }

    i {
      width: 4px;
      height: 18px;
      background: #007FFE;
    }

    .colorccc {
      font-weight: 400;

      p:first-child {
        text-align: left;
        width: 160px;
      }
    }

    .colorfff {
      font-size: 16px;
      font-weight: 400;
    }
  }
}
/deep/.vue-circular-progress .percent__int{
  font-size:20px ;
}
/deep/.vue-circular-progress .dot{
  font-size:10px ;
}
/deep/.vue-circular-progress .percent__dec {
  font-size:10px ;
}
/deep/.vue-circular-progress .percent_sign {
  font-size:10px ;
}
</style>
